<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d/>
<#import '${ctx}/sys/include/body.html' as c/>
<#import '${ctx}/sys/include/table/toolbar.html' as t/>
<!DOCTYPE html>
<html>
<head>
    <@d.head title="图表列表" />
</head>
<@c.body>
<table class="layui-hide" id="role_list" lay-filter="role_list">
</@c.body>
<script type="text/html" id="chartToolBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'appJs', 'dtree'], function () {
        var table = layui.table;
        var $ = layui.$;
        var app = layui.appJs;
        var dtree = layui.dtree;
        var tableOptions = {
            id: 'role_table'
            , elem: '#role_list'
            //,height: 420
            , url: '${ctx}/biz/visualize/chart_setting/list' //数据接口
            , title: '图表列表'
            , page: true //开启分页
            , toolbar: '#topBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'chartName', width: 100, title: '图表名称'}
                // , {field: 'chartDsId', width: 100, title: '数据源ID'}
                , {field: 'chartDsName', width: 100, title: '数据源名称'}
                , {field: 'chartMetrics', width: 100, title: '指标设置'}
                , {field: 'chartDimensions', width: 100, title: '维度设置'}
                , {field: 'chartQuerys', width: 100, title: '过滤条件'}
                , {field: 'chartCustoms', title: '图表自定义信息'}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#itemBar'}
            ]]
        };
        table.render(tableOptions);
        table.on('toolbar(role_list)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    window.location.href = '${ctx}/biz/visualize/chart';
                    break;
                case 'delete':
                    if (checkStatus.data.length <= 0) {
                        layer.msg("未选中删除行");
                        return;
                    }
                    layer.confirm('确定删除吗？', function (index) {
                        var ids = [];
                        for (var r of checkStatus.data) {
                            ids.push(r.id);
                        }
                        $.ajax({
                            type: 'post',
                            url: '${ctx}/biz/visualize/chart_setting/deletes',
                            data: {ids: ids},
                            traditional: true,
                            success: function (data) {
                                if (data.code == 0) {
                                    layer.msg("删除成功");
                                    table.reload('role_table', tableOptions);
                                } else {
                                    layer.msg(data.code + ":" + data.msg);
                                }
                            }
                        });
                    });break;
            }
        });

        table.on('tool(role_list)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                window.location.href = '${ctx}/biz/visualize/chart?id='+data.id;
            }else if(layEvent === 'edit'){ //编辑
                window.location.href = '${ctx}/biz/visualize/chart?id='+data.id;
            }
            else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '${ctx}/biz/visualize/chart_setting/delete',
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功");
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            } else {
                                layer.msg(data.code + ":" + data.msg);
                            }
                        }
                    });
                });
            }
        });

        window.getPermissions = function () {
            var params = dtree.getCheckbarNodesParam("permission_tree");
            var pid = [];
            layui.each(params, function (_, p) {
                pid.push(p.nodeId);
            });
            return pid;
        }

        function initPermission(obj) {
            var treeObj = dtree.render({
                obj: obj,
                url: '${ctx}/sys/permission/permission_list',
                checkbar: true,
                dataStyle: "layuiStyle",
                dataFormat: "list",
                response: {message: "msg", statusCode: 0},
                done: function () {
                }
            });
        }

        function fillPermission(obj, id) {
            var treeObj = dtree.render({
                obj: obj,
                url: '${ctx}/sys/permission/permission_list',
                checkbar: true,
                dataStyle: "layuiStyle",
                dataFormat: "list",
                response: {message: "msg", statusCode: 0},
                done: function () {
                    $.ajax({
                        type: 'post',
                        url: '${ctx}/sys/role/find_permissions',
                        data: {id: id},
                        success: function (data) {
                            dtree.chooseDataInit('permission_tree', data.join(","));
                        }
                    })
                }
            });
        }
    })
</script>
<@t.bar />